<template>

    <el-form :inline="true" :model="condations" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="condations.createUser" placeholder="创建人" clearable />
            <el-input v-model="condations.caseName" placeholder="用例名称" clearable />
            <el-button type="primary" @click="submit">查询</el-button>
            <el-button @click="reset" type="info" round>重置</el-button>
        </el-form-item>
        <el-form-item>
            <el-button @click="handleClick()" type="primary" round><el-icon>
                    <CirclePlus />
                </el-icon>新增</el-button>
        </el-form-item>
        <el-form-item>
            <el-button @click="handleImport()" type="primary" round><el-icon>
                    <DocumentAdd />
                </el-icon>导入</el-button>
        </el-form-item>
        <el-form-item>
            <el-button @click="handleDownload()" type="primary" round><el-icon>
                    <DocumentAdd />
                </el-icon>导出</el-button>
        </el-form-item>
    </el-form>

    <el-table :data="apiList" style="width: 100%" border>
        <el-table-column fixed prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="名称" width="250" />
        <el-table-column prop="level" label="用例等级" width="120" />
        <el-table-column prop="type" label="请求方式" width="120" />
        <el-table-column prop="apiPath" label="接口地址" width="350" />
        <el-table-column prop="result" label="执行结果" width="120" />
        <el-table-column prop="status" label="执行状态" width="120" />
        <el-table-column prop="tag" label="标记" width="120" />
        <el-table-column prop="creator" label="创建人" width="120" />
        <el-table-column prop="createTime" label="创建时间" width="120">
            <template v-slot="scope">
                {{ formatDate(scope.row.createTime, "YYYY-MM-DD HH:mm:ss") }}
            </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="120">
            <template v-slot="scope">
                {{ formatDate(scope.row.updateTime, "YYYY-MM-DD HH:mm:ss") }}
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="150">
            <template v-slot="scope">
                <el-button link type="primary" size="small" @click="handleClick('详情', scope.row)">详情</el-button>
                <el-button link type="primary" size="small" @click="handleClick('编辑', scope.row)">编辑</el-button>
                <el-button link type="primary" size="small" @click="handleClick('删除', scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页控件 -->
    <!-- <div class="demo-pagination-block">
        <div class="demonstration">All combined</div>
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
            :page-sizes="[100, 200, 300, 400]" :size="size" :disabled="disabled" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div> -->

    <case-add v-if="(title === '新增' || title === '编辑') && show" :show="show" :title="title" :caseData="caseData"
        @close="handleClose" />
    <case-detail v-if="title === '详情' && show" :show="show" :caseData="caseData" @close="handleClose" />
    <import-component v-if="title === '导入' && show" :show="show" :title="title" @close="handleClose" />
</template>

<script setup>
import { onMounted, ref } from 'vue'
import CaseAdd from './CaseAdd.vue'
import CaseDetail from './CaseDetail.vue'
import ImportComponent from '@/components/ImportComponent.vue'
import { projectListService, testCaseDeleteService, testCaseDownloadService } from '@/api/testCaseAPI'

const apiList = ref([])
const show = ref(false)
const title = ref('新增')
const caseData = ref({})
const condations = ref({
    createUser: '',
    caseName: ''
})

// 获取用例列表
const fetchApiList = async (params) => {
    let res = await projectListService(params);
    apiList.value = res.data;
}

// 按钮操作功能
const handleClick = (val, rowData) => {
    if (val === '删除') {
        console.log(rowData);
        ElMessageBox.confirm('请确认是否要删除?', '提示：', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            console.log(rowData.id);
            testCaseDeleteService({ id: rowData.id });
            setTimeout(() => {
                fetchApiList();
            }, 300);
            ElMessage({
                type: 'success',
                message: '确认删除',
            });
        }).catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            });
        });
        return;
    }
    show.value = true;
    title.value = val ?? '新增';
    caseData.value = rowData ?? {};
}

// 关闭弹窗
const handleClose = async () => {
    show.value = false;
    // title.value = '新增';
    // caseData.value = {};
    setTimeout(() => {
        fetchApiList();
    }, 300);
}

// 查询操作
const submit = async () => {
    await fetchApiList(condations.value);
}

// 重置操作
const reset = () => {
    condations.value = {
        createUser: '',
        caseName: ''
    };
    fetchApiList();
}

// 导入操作
const handleImport = () => {
    show.value = true;
    title.value = '导入';
}

// 导出操作
const handleDownload = async () => {
    const res = await testCaseDownloadService();
    const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const linkNode = document.createElement('a');
    linkNode.style.display = 'none';
    linkNode.download = "测试模版";
    linkNode.href = URL.createObjectURL(blob); // 生成一个Blob URL
    document.body.appendChild(linkNode);
    linkNode.click(); // 模拟在按钮上的一次鼠标单击
    URL.revokeObjectURL(linkNode.href); // 释放URL 对象
    document.body.removeChild(linkNode);
}

onMounted(() => {
    fetchApiList();
})

</script>

<style scoped>
.demo-form-inline .el-input {
    --el-input-width: 200px;
}

.table-container {
    width: 100%;
}
</style>